<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>distance</view>
				<view>Number</view>
				<view>30</view>
				<view>滑动触发距离</view>
			</view>
			<view class="tr">
				<view>longPressTime</view>
				<view>Number</view>
				<view>1500</view>
				<view>长按事件等待时间</view>
			</view>
			<view class="tr">
				<view>@left</view>
				<view>事件</view>
				<view></view>
				<view>左方向触发事件，提交传递的参数</view>
			</view>
			<view class="tr">
				<view>@right</view>
				<view>事件</view>
				<view></view>
				<view>右方向触发事件，提交传递的参数</view>
			</view>
			<view class="tr">
				<view>@top</view>
				<view>事件</view>
				<view></view>
				<view>上方向触发事件，提交传递的参数</view>
			</view>
			<view class="tr">
				<view>@bottom</view>
				<view>事件</view>
				<view></view>
				<view>下方向触发事件，提交传递的参数</view>
			</view>
			<view class="tr">
				<view>@leftActive</view>
				<view>事件</view>
				<view></view>
				<view>左方向状态，提交激活状态</view>
			</view>
			<view class="tr">
				<view>@rightActive</view>
				<view>事件</view>
				<view></view>
				<view>右方向状态，提交激活状态</view>
			</view>
			<view class="tr">
				<view>@topActive</view>
				<view>事件</view>
				<view></view>
				<view>上方向状态，提交激活状态</view>
			</view>
			<view class="tr">
				<view>@bottomActive</view>
				<view>事件</view>
				<view></view>
				<view>下方向状态，提交激活状态</view>
			</view>
			<view class="tr">
				<view>@longPress</view>
				<view>事件</view>
				<view></view>
				<view>长按触发事件</view>
			</view>
			<view class="tr">
				<view>@start</view>
				<view>事件</view>
				<view></view>
				<view>触摸开始事件</view>
			</view>
			<view class="tr">
				<view>@move</view>
				<view>事件</view>
				<view></view>
				<view>触摸移动事件</view>
			</view>
			<view class="tr">
				<view>@end</view>
				<view>事件</view>
				<view></view>
				<view>触摸结束事件</view>
			</view>
			<view class="tr">
				<view>start</view>
				<view>function</view>
				<view></view>
				<view>触摸开始，第一个传入参数为目标元素touchstart事件e的直接传递。其余参数为扩展自定义参数，在方向事件触发时回传</view>
			</view>
			<view class="tr">
				<view>move</view>
				<view>function</view>
				<view></view>
				<view>触摸移动，同上</view>
			</view>
			<view class="tr">
				<view>end</view>
				<view>function</view>
				<view></view>
				<view>触摸结束，同上</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="">
				本组件用于简化处理触屏事件，提供一组常用返回
			</view>
			<view class="py-sm">
				基本使用：{{'&lt;vi-touch-processor ref="组件id">&lt;/vi-touch-processor>'}}
				<view>
					使用refs传入元素touch事件：
					<view>this.$refs.touchProcessor[type](e, ...params)</view>
					<view class="indent">touchProcessor：组件id</view>
					<view class="indent">type：touch类型，start、move、end</view>
					<view class="indent">e：touch事件的$event传递</view>
					<view class="indent">params：自定义扩展参数，在触发事件时回传</view>
				</view>
			</view>
			<view class="py-sm" @touchmove.stop.prevent>
				返回单个方向
				<vi-touch-processor ref="touchProcessor"
					@left="onEventL"
					@right="onEventR"
					@top="onEventU"
					@bottom="onEventD"
					@leftActive="changeState($event,'leftAct')"
					@rightActive="changeState($event,'rightAct')"
					@topActive="changeState($event,'topAct')"
					@bottomActive="changeState($event,'bottomAct')"
					@longPress="longPress"></vi-touch-processor>
				<view class="fbox">
					<view class="fbox w-e3 h-e3"
						:class="{
							'tbor':topAct,
							'bbor':bottomAct,
							'lbor':leftAct,
							'rbor':rightAct,
						}"
						@touchstart="touchPass($event, 'start', '其他参数1', '其他参数2')"
						@touchmove="touchPass($event, 'move')"
						@touchend="touchPass($event, 'end')">
						<vi-style-controller type="primary" width="3em" height="3em" active>触点</vi-style-controller>
					</view>
				</view>
			</view>
			<view class="py-sm" @touchmove.stop.prevent>
				返回多个方向
				<vi-touch-processor ref="touchProcessor1"
					:single="false"
					@left="onEventL"
					@right="onEventR"
					@top="onEventU"
					@bottom="onEventD"
					@leftActive="changeState($event,'leftAct1')"
					@rightActive="changeState($event,'rightAct1')"
					@topActive="changeState($event,'topAct1')"
					@bottomActive="changeState($event,'bottomAct1')"
					@longPress="longPress"></vi-touch-processor>
				<view class="fbox">
					<view class="fbox w-e3 h-e3"
						:class="{
							'tbor':topAct1,
							'bbor':bottomAct1,
							'lbor':leftAct1,
							'rbor':rightAct1,
						}"
						@touchstart="touchPass1($event, 'start', '其他参数1', '其他参数2')"
						@touchmove="touchPass1($event, 'move')"
						@touchend="touchPass1($event, 'end')">
						<vi-style-controller type="primary" width="3em" height="3em" active>触点</vi-style-controller>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftAct:false,
				rightAct:false,
				topAct:false,
				bottomAct:false,
				
				leftAct1:false,
				rightAct1:false,
				topAct1:false,
				bottomAct1:false,
			}
		},
		methods: {
			//触屏事件传递
			touchPass(e, type, ...params){
				this.$refs.touchProcessor[type](e, ...params)
			},
			touchPass1(e, type, ...params){
				this.$refs.touchProcessor1[type](e, ...params)
			},
			onEventL(...e){
				this.$api.msg("左："+ e, "info")
			},
			onEventR(...e){
				this.$api.msg("右："+ e, "info")
			},
			onEventU(...e){
				this.$api.msg("上："+ e, "info")
			},
			onEventD(...e){
				this.$api.msg("下："+ e, "info")
			},
			changeState(state, type){
				this[type] = state
			},
			longPress(...e){
				this.$api.msg("触发长按："+ e, "error")
			}
		}
	}
</script>

<style lang="scss" scoped>
.tbor{
	border-top: 2px solid #d00;
}
.bbor{
	border-bottom: 2px solid #d00;
}
.lbor{
	border-left: 2px solid #d00;
}
.rbor{
	border-right: 2px solid #d00;
}
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
